<template>
  <div class="product-info">
    <el-form ref="form" :model="InfoForm" :rules="InfoRules" label-width="110px">
      <el-form-item label="商品名称：" prop="productName">
        <el-input v-model="InfoForm.productName" placeholder="请输入商品名称" size="small"></el-input>
      </el-form-item>

      <el-form-item label="商品分类：" prop="productCategory">
        <el-drag-select v-model="InfoForm.productCategory" style="width:100%;" multiple placeholder="请选择分类">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-drag-select>
      </el-form-item>

      <el-form-item label="商品关键字：">
        <el-input v-model="InfoForm.productKeyword" placeholder="请输入商品关键字" size="small"></el-input>
      </el-form-item>

      <el-form-item label="单位：" prop="productCompany">
        <el-input v-model="InfoForm.productCompany" placeholder="请输入单位" size="small"></el-input>
      </el-form-item>

      <el-form-item label="商品描述：">
        <el-input
          type="textarea"
          rows="3"
          placeholder="请输入商品描述"
          v-model="InfoForm.productIntroduce"
        >
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary">下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import ElDragSelect from '@/components/DragSelect';

  export default {
    name: "productInfo",
    props: {
      info: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    components: {
      ElDragSelect
    },
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        InfoForm: {
          productName: "",
          productCategory: [],
          productKeyword: "",
          productCompany: "",
          productIntroduce: ""
        },
        InfoRules: {
          productName: [
            { required: true, message: '请输入商品名称', trigger: 'blur' }
          ],
          productCategory: [
            { required: true, message: '请选择分类', trigger: 'change' }
          ],
          productCompany: [
            { required: true, message: '请输入单位', trigger: 'blur' }
          ]
        },
        options: [
          {
            value: 'Apple',
             label: 'Apple'
          },
          {
            value: 'Banana',
            label: 'Banana'
          },
          {
            value: 'Orange',
            label: 'Orange'
          },
          {
            value: 'Pear',
            label: 'Pear'
          },
          {
            value: 'Strawberry',
            label: 'Strawberry'
          }
        ]
      };
    },
    methods: {
      // 数据迭代
      dataMethod() {

      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
  }
</script>

<style lang="scss" scope>
  .product-info {
    .label-items{
      .el-form-item__label{
        line-height: 20px;
      }
    }
  }
</style>
